<template>
  <el-main>
    <el-form :model="form" :rules="rules" ref="form" label-width="80px">
      <el-form-item label="标题" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="时间" >
        <el-col :span="11">
          <el-form-item prop="data1">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-form-item prop="data2">
            <el-time-picker
                type="fixed-time"
                placeholder="选择时间"
                v-model="form.date2"
                style="width: 100%;"
            ></el-time-picker>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="归类" prop="type">
        <el-checkbox-group v-model="form.type">
          <el-checkbox label="JavaScript" name="type"></el-checkbox>
          <el-checkbox label="Nodejs" name="type"></el-checkbox>
          <el-checkbox label="React" name="type"></el-checkbox>
          <el-checkbox label="Vue" name="type"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="版权"  prop="resource">
        <el-radio-group v-model="form.resource">
          <el-radio label="原创"></el-radio>
          <el-radio label="转载"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="正文" prop="desc">
        <el-input type="textarea" v-model="form.desc"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit(form)">发送</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </el-main>
</template>

<script>
export default {
  data () {
    return {
      form: {
        name: '',
        date1: '',
        date2: '',
        type: [],
        resource: '',
        desc: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
        ],
        date1: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ],
        date2: [
          { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
        ],
        type: [
          { type: 'array', required: true, message: '请至少选择一个类型', trigger: 'change' }
        ],
        resource: [
          { required: true, message: '请选择文章资源', trigger: 'change' }
        ],
        desc: [
          { required: true, message: '请填写正文', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    onSubmit (form) {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$store.commit('submit', this.form)
          this.$router.replace('/blogList')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    cancel () {
    //   this.form = {
    //     name: '',
    //     region: '',
    //     date1: '',
    //     date2: '',
    //     delivery: false,
    //     type: [],
    //     resource: '',
    //     desc: ''
    //   }
      this.$router.replace('/hello')
    }

  }
}
</script>
